@import '../../styles/variables';

.timeline-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: @white;

  .timeline-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @spacing-md @spacing-lg;
    border-bottom: 1px solid @border-color;
    background: @gray-50;

    .playback-controls {
      display: flex;
      align-items: center;
      gap: @spacing-sm;

      button {
        padding: @spacing-xs @spacing-sm;
        border: 1px solid @border-color;
        border-radius: @border-radius;
        background: @white;
        color: @gray-700;
        cursor: pointer;
        transition: all @transition-fast;

        &:hover:not(:disabled) {
          border-color: @primary-color;
          color: @primary-color;
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }

    .zoom-controls {
      display: flex;
      align-items: center;
      gap: @spacing-sm;

      button {
        padding: @spacing-xs;
        border: 1px solid @border-color;
        border-radius: @border-radius;
        background: @white;
        color: @gray-700;
        cursor: pointer;
        transition: all @transition-fast;

        &:hover:not(:disabled) {
          border-color: @primary-color;
          color: @primary-color;
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      .zoom-level {
        font-size: @font-size-sm;
        color: @gray-600;
        min-width: 40px;
        text-align: center;
      }
    }

    .time-display {
      font-size: @font-size-sm;
      color: @gray-600;
      font-family: 'Courier New', monospace;
      background: @white;
      padding: @spacing-xs @spacing-sm;
      border-radius: @border-radius;
      border: 1px solid @border-color;
    }
  }

  .timeline-container {
    flex: 1;
    position: relative;
    background: @gray-50;
    border: 1px solid @border-color;
    margin: @spacing-lg;
    border-radius: @border-radius;
    overflow: hidden;
    cursor: pointer;

    .timeline-marks {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 30px;
      background: @white;
      border-bottom: 1px solid @border-color;

      .timeline-mark {
        position: absolute;
        top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .timeline-mark-line {
          width: 1px;
          height: 15px;
          background: @gray-300;
        }

        .timeline-mark-label {
          font-size: @font-size-xs;
          color: @gray-500;
          margin-top: 2px;
        }
      }
    }

    .playhead {
      position: absolute;
      top: 30px;
      bottom: 0;
      width: 2px;
      background: @red-500;
      pointer-events: none;
      z-index: 10;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -4px;
        width: 10px;
        height: 10px;
        background: @red-500;
        border-radius: 50%;
      }
    }

    .video-track {
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      height: 80px;
      background: @gray-100;
      border-bottom: 1px solid @border-color;

      .timeline-clip {
        position: absolute;
        top: 10px;
        height: 60px;
        background: linear-gradient(135deg, @primary-color, @primary-color-dark);
        border-radius: 6px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all @transition-fast;
        overflow: hidden;

        &:hover {
          transform: translateY(-1px);
          box-shadow: @shadow-md;
        }

        &.selected {
          border-color: @primary-color;
          box-shadow: 0 0 0 2px fade(@primary-color, 20%);
        }

        .clip-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          position: relative;

          .clip-thumbnail {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: fade(@white, 10%);
            position: relative;
            cursor: grab;

            &:active {
              cursor: grabbing;
            }

            .clip-icon {
              width: 16px;
              height: 16px;
              color: @white;
              opacity: 0.8;
            }

            .clip-overlay {
              position: absolute;
              top: 4px;
              right: 4px;
              opacity: 0;
              transition: opacity @transition-fast;

              .drag-handle {
                color: @white;
                opacity: 0.7;
              }
            }
          }

          &:hover .clip-overlay {
            opacity: 1;
          }

          .clip-info {
            padding: 4px 8px;
            background: fade(@black, 20%);
            color: @white;
            font-size: @font-size-xs;

            .clip-name {
              display: block;
              .truncate();
            }

            .clip-duration {
              opacity: 0.8;
              font-size: 10px;
            }
          }

          .clip-actions {
            position: absolute;
            top: 4px;
            left: 4px;
            display: flex;
            gap: 2px;

            .action-btn {
              width: 16px;
              height: 16px;
              border: none;
              border-radius: 2px;
              cursor: pointer;
              opacity: 0;
              transition: opacity @transition-fast;
              display: flex;
              align-items: center;
              justify-content: center;

              &.delete-btn {
                background: @red-500;
                color: @white;

                &:hover {
                  background: @red-600;
                }
              }
            }
          }

          &:hover .action-btn {
            opacity: 1;
          }
        }
      }
    }

    .audio-track {
      position: absolute;
      top: 110px;
      left: 0;
      right: 0;
      height: 60px;
      background: @gray-50;
      border-top: 1px solid @border-color;
    }

    .timeline-drop-zone {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: @gray-500;

      p {
        margin-top: @spacing-sm;
        font-size: @font-size-sm;
      }
    }
  }

  @media (max-width: @screen-lg) {
    .timeline-controls {
      flex-wrap: wrap;
      gap: @spacing-md;

      .playback-controls,
      .zoom-controls {
        flex: 1;
        justify-content: center;
      }

      .time-display {
        flex-basis: 100%;
        text-align: center;
        margin-top: @spacing-md;
      }
    }
  }
}